<template>
  <div class="zero-drift tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:380px">
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              start-placeholder="开始日期"
              format = 'yyyy-MM-dd HH:00:00'
              value-format = 'yyyy-MM-dd HH:00:00'
              end-placeholder="结束日期">
            </el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
      </div>&emsp;&emsp;
      <el-button @click="searchDate()"><i class="iconfont icon-sousuo" ></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有”24小时跨度漂移“50次，共有合格项46个，不合格项4个。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">列表</el-radio-button>
              <el-radio-button label="2">图表</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div  class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :data="tableData"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index"
                fixed
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                prop="date"
                fixed
                label="日期"
                width="182">
                <template slot-scope="scope">
                  <span>{{ setTableDate(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item.indexName">
                <el-table-column
                  prop="gmResult"
                  label="测试结果"
                  width="80">
                  <template slot-scope="scope">
                    {{ scope.row[item.indexCode].value }}
                  </template>
                </el-table-column>
                <el-table-column label="跨度核查">
                  <el-table-column
                    prop="gmCon"
                    width="90"
                    label="标准样浓度">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].standardSamplesValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmAbsolutely"
                    label="相对误差">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].checkRelativeError === '-' ? '-' : scope.row[item.indexCode].checkRelativeError+'%' }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmQualified"
                    label="合格情况">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].qualification }}
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column label="24小时跨度漂移">
                  <el-table-column
                    prop="gmTest"
                    width="118"
                    label="前一次测试结果">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].lastValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmSpan"
                    label="跨度值">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].spanValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmRelative"
                    label="相对误差">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].driftRelativeError === '-' ? '-' : scope.row[item.indexCode].driftRelativeError+'%'}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="gmQualifiedPy"
                    label="合格情况">
                    <template slot-scope="scope">
                      {{ scope.row[item.indexCode].qualification }}
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table-column>
              <!--<el-table-column  label="氨氮(mg/L)">
                <el-table-column
                  prop="adResult"
                  label="测试结果">
                </el-table-column>
                <el-table-column label="零点核查">
                  <el-table-column
                    prop="adCon"
                    width="90"
                    label="标准样浓度">
                  </el-table-column>
                  <el-table-column
                    prop="adAbsolutely"
                    label="绝对误差">
                  </el-table-column>
                  <el-table-column
                    prop="adQualified"
                    label="合格情况">
                  </el-table-column>
                </el-table-column>
                <el-table-column label="24小时零点漂移">
                  <el-table-column
                    prop="adTest"
                    width="118"
                    label="前一次测试结果">
                  </el-table-column>
                  <el-table-column
                    prop="adSpan"
                    label="跨度值">
                  </el-table-column>
                  <el-table-column
                    prop="adRelative"
                    label="相对误差">
                  </el-table-column>
                  <el-table-column
                    prop="adQualifiedPy"
                    label="合格情况">
                  </el-table-column>
                </el-table-column>
              </el-table-column>-->
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>
        <div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <el-scrollbar style="height: 100%;">
            <div v-if="stateRadio === '2'">
              <div v-for="(item,index) in chartList" :key="'k'+index" :id="setChartId(index)" style="height: 300px;"></div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        dateRange: "",
        stateRadio:'1',
        value:['w01019','w21003'],
        optionData:[{
          value:'w01019',
          label:'高锰酸盐'
        },{
          value:'w21003',
          label:'氨氮'
        },{
          value:'w21011',
          label:'总磷'
        },{
          value:'w21001',
          label:'总氮'
        },{
          value:'w01001',
          label:'pH'
        },{
          value:'w21023',
          label:'水温'
        },{
          value:'w01009',
          label:'溶解氧'
        },{
          value:'w01014',
          label:'电导率'
        },{
          value:'w01003',
          label:'浊度'
        }],
        tableData:[],
        tableHead:'',
        stationId:'',
        currentPage: 1, //分页组件当前页
        pageSize: 10, //分页每页多少条数据
        totalRecords: 0, //总条数
        pageList: [10, 15, 20], //设置每页多少条
        chartList:[]
      };
    },
    computed: {
      totalPage(){//计算总页数
        let number = 0;
        number = Math.ceil(this.totalRecords / this.pageSize);
        return number === 0 ? 1 : number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods:{
        //创建图表
      createdChart(){
         for (let i=0;i < this.chartList.length;i++){
           let chart = this.$echarts.init(document.getElementById('zeroDrift'+i));
           let option = {
             title:{
               text:"24小时"+ this.chartList[i].name +"跨度漂移历史数据",
               x:'center',
               y:20
             },
             xAxis: {
               type: 'category',
               name:'时间',
               data: this.chartList[i].xAxis
             },
             legend: {
               data:[this.chartList[i].name],
               bottom:0
             },
             yAxis: {
               type: 'value',
               name:"相对误差(%)",
             },
             visualMap: {
               top: 10,
               right: -100,
               pieces: [{
                 gte: -5,
                 lte: 5,
                 color: '#009966',
                 label:'合格',
               },{
                 gt: 5,
                 color: '#d68787',
                 label:'不合格',
               }],
               outOfRange: {
                 color: '#d68787'
               }
             },
             grid:{
               top: 80,
               left: 80,
               bottom: 50,
               right: 70
             },
             series: [{
               data: this.chartList[i].yAxis,
               name: this.chartList[i].name,
               type: 'line',
               symbol: 'triangle',
               symbolSize: 20,
               lineStyle: {
                 normal: {
                   color: '#008000',
                   width: 4,
                   type: 'dashed'
                 }
               },
               itemStyle: {
                 normal: {
                   borderWidth: 3,
                   color:'#0ec15a'
                 }
               },
               markLine: {
                    lineStyle:{
                      color:'red',
                      type:'solid'
                    },
                    data: [
                      {yAxis: this.chartList[i].upper, name: '最大误差'},
                      {yAxis: this.chartList[i].lower, name: '最小误差'}
                    ]
               },
             }]
           };
           chart.setOption(option);
         }
       },
      toggleTab(val){
        // console.log(val);
        if(val === '2'){
          setTimeout(()=>{
            this.createdChart();
          },500);
        }
      },
      paginationChange(val) {
        //分页页码改变时执行
        this.currentPage = val;
        this.searchZeroDriftChart();
      },
      paginationSizeChange(val) {
        //分页pageSize改变时执行
        this.pageSize = val;
        this.searchZeroDrift();
      },
      //查询按钮点击事件
      searchDate(){
        this.searchZeroDrift();
        this.searchZeroDriftChart();
      },
      //获取查询表格数据
      searchZeroDrift(){
        this.$http.get('/Quality/testData/spanDriftData',{
          params:{
            startTime:this.dateRange[0],
            endTime:this.dateRange[1],
            indexCodes:this.value.join(','),
            stationCodes: this.stationId,//this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
            pageNumber: this.currentPage,
            pageSize: this.pageSize
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.tableHead = res.data.content.dataList.length > 0 ? res.data.content.dataList[0] : [];
            this.tableData = res.data.content.dataList;
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
          }
        }).catch(error=>{

        })
      },
      //获取查询图表数据
      searchZeroDriftChart(){
        this.$http.get('/Quality/testData/spanDriftChartData',{
          params:{
            startTime:this.dateRange[0],
            endTime:this.dateRange[1],
            indexCodes:this.value.join(','),
            stationCodes: this.stationId//this.stationId
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.chartList = res.data.content.dataList;
          }
        }).catch(error=>{

        })
      },
      //设置图表id
      setChartId(index){
        return 'zeroDrift'+index;
      },
      setTableDate(data){//设置时间
        for (let i in data){
          return data[i].time;
        }
      }
    },
    mounted(){
      // this.searchZeroDrift();
      // this.searchZeroDriftChart();
    },
    created() {
      //初始化时间
      let startTime = new Date().setDate(new Date().getDate() - 1);
      let endTime = new Date();
      this.dateRange = [new Date(startTime).format('yyyy-MM-dd hh:00:00'),endTime.format('yyyy-MM-dd hh:00:00')];
    },
    watch:{
      stationInfo(value){
        if (value.length>0) {
          this.stationId = value[0].nodeId;
          this.searchZeroDrift();
          this.searchZeroDriftChart();
        }
      }
    }
  };
</script>

<style scoped lang="less">
.chart-wrap{
  border: 1px solid #dbe8f7;
}
</style>
